<template>
	<div>
		<!-- {{msg}} -->
		<!-- <button @click="test">测试</button> -->
		<!-- {{fullName}} -->
		<!-- <div class="static" v-bind:class="classObject">123</div> -->
		<!-- 		<div v-if="loginType == true">
			<label>Username</label>
			<input placeholder="Enter your username" key="name">
		</div>
		<div v-else>
			<label>Email</label>
			<input placeholder="Enter your email address" key="email">
		</div> -->
		<!-- 		<ul id="example-1">
			<li v-for="item in items" :key="item.message">
				{{ item.message }}
			</li>
		</ul> -->
		<!-- 			<ul id="v-for-object" class="demo">
			<li v-for="(value, key, index) in object" :key="value" is="list">
				{{ key }}: {{ value }},{{ index }}
			</li>
		</ul> -->
		<!-- <li v-for="n in evenNumbers" :key="n">{{ n }}</li> -->
		<!-- 		<ul v-for="(set,index) in sets" :key="index">
			<li v-for="n in even(set)" :key="n">{{ n }}</li>
		</ul> -->
		<!-- 		<div>
			<span v-for="n in 10" :key="n">{{ n }} </span>
		</div> -->
		<!-- 		<ul v-if="todos.length">
			<li v-for="todo in todos" :key="todo">
				{{ todo }}
			</li>
		</ul>
		<p v-else>No todos left!</p> -->
		<!-- 		<button v-on:click="test('Form cannot be submitted yet.', $event)">
			Submit
		</button> -->
		<!-- <a v-on:click.once="test">1</a> -->
		<!-- <input v-on:keyup.enter="test"> -->
		<!-- 		<div v-on:click.alt="test">Do something</div>
		<div v-on:click.ctrl.exact="test">Do something</div> -->
		<!-- 		<span>Multiline message is:</span>
		<p style="white-space: pre-line;">{{ message }}</p>
		<br>
		<textarea v-model="message" placeholder="add multiple lines"></textarea> -->
		<!-- 		<input type="checkbox" id="checkbox" v-model="checked">
		<label for="checkbox">{{ checked }}</label> -->
		<!-- 		<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
		<label for="jack">Jack</label>
		<input type="checkbox" id="john" value="John" v-model="checkedNames">
		<label for="john">John</label>
		<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
		<label for="mike">Mike</label>
		<br>
		<span>Checked names: {{ checkedNames }}</span> -->
		<!-- 		<input type="radio" id="one" value="One" v-model="picked">
		<label for="one">One</label>
		<br>
		<input type="radio" id="two" value="Two" v-model="picked">
		<label for="two">Two</label>
		<br>
		<span>Picked: {{ picked }}</span> -->
		<!-- 		<select v-model="selected">
			<option disabled value="">请选择</option>
			<option>A</option>
			<option>B</option>
			<option>C</option>
		</select>
		<span>Selected: {{ selected }}</span> -->
		<!-- 		<select v-model="selected" multiple style="width: 50px;">
			<option>A</option>
			<option>B</option>
			<option>C</option>
		</select>
		<br>
		<span>Selected: {{ selected }}</span> -->
		<!-- 		<select v-model="selected">
			<option v-for="option in options" v-bind:value="option.value" :key="option.value">
				{{ option.text }}
			</option>
		</select>
		<span>Selected: {{ selected }}</span> -->
		<!-- 		<input v-model.lazy="msg"/> -->
		<!-- {{msg}} -->
		<!-- 		{{title}}
		{{post.title}} -->
		<!-- 		<button @click="$emit('enlarge-text', 0.1)">
			Enlarge text
		</button> -->
		<button @click="test1">测试呀</button>
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		name: 'HelloWorld',
		props: {
			// msg: String
			post: Object,
			title: String
		},
		data() {
			return {
				// firstName: 'Lee',
				// lastName: 'Ya'
				// classObject: {
				// 	active: true,
				// 	'text-danger': false
				// }
				// loginType: false
				// items: [{
				// 		message: 'Foo'
				// 	},
				// 	{
				// 		message: 'Bar'
				// 	}
				// ],
				object: {
					title: 'How to do lists in Vue',
					author: 'Jane Doe',
					publishedAt: '2016-04-10'
				}
				// numbers: [1, 2, 3, 4, 5]
				// sets: [
				// 	[1, 2, 3, 4, 5],
				// 	[6, 7, 8, 9, 10]
				// ]
				// todos: []
				// message: "",
				// checked: false
				// checkedNames: [],
				// picked: '',
				// selected: '',
				// selected: []
				// selected: 'A',
				// options: [{
				// 		text: 'One',
				// 		value: 'A'
				// 	},
				// 	{
				// 		text: 'Two',
				// 		value: 'B'
				// 	},
				// 	{
				// 		text: 'Three',
				// 		value: 'C'
				// 	}
				// ]
				// msg: ""

			}
		},
		computed: {
			// fullName: {
			// 	// getter
			// 	get: function() {
			// 		return this.firstName + ' ' + this.lastName
			// 	},
			// 	// setter
			// 	set: function(newValue) {
			// 		console.log(newValue)
			// 		this.firstName = newValue
			// 		this.lastName = newValue
			// 	}
			// }
			// evenNumbers: function() {
			// 	return this.numbers.filter(function(number) {
			// 		return number % 2 === 0
			// 	})
			// }
		},
		methods: {
			// even(numbers) {
			// 	return numbers.filter(function(number) {
			// 		return number % 2 === 0
			// 	})
			// },
			// test(msg, event) {
			// console.log(msg, event)
			// this.fullName = "LeeLee";
			// this.msg = this.msg + 1;
			// $emit('click')
			// this.loginType = !this.loginType;
			// this.items.push({
			// 	message: 'Baz'
			// })
			// this.items = this.items.filter(function(item) {
			// 	return item.message.match(/Foo/)
			// })
			// }
			test1() {
				this.$store.commit('increment')
				console.log(this.$store.state.count)
			}
		}
	}
</script>

<style scoped>
	.active {
		width: 100px;
		height: 100px;
		background-color: #f2f2f2;
	}
</style>
